﻿<!DOCTYPE html>
<!--
 Copyright (c) 2016, Robert Gaffney
 All rights reserved.
 Licensed under New BSD 2-clause license.
    -->
<html lang="en" ng-app="myGame">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="Content/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="Scripts/angular.min.js"></script>
    <script src="myGame.js"></script>
</head>
<body>
    <!-- main bootstrap container -->
    <div id="content" class="container">
        <!-- Publisher -->
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 text-center">
                <div class="titleBox">
                    <h3 class="title">Me Am Bobbo</h3>
                </div>
            </div>
        </div>
        <!-- Presents -->
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 text-center">
                -- <span class="presents">Presents</span> --
            </div>
        </div>
        <!-- Game Title/Subtitle -->
        <div class="row">
            <div class="col-xs-10 col-xs-offset-1 text-center">
                <div class="subtitle">
                    <h2 class="subtitle">Test your Memory</h2>
                    <h4 class="subtitle">An angular.js demo app</h4>
                </div>
            </div>
        </div>
        <!-- game area -->
        <div class="row">
            <div class="col-xs-10 col-xs-offset-1">
                <!-- here is the entire scope for our game and the angular js controller -->
                <div class="gamearea" ng-controller="gameController as game">
                    <!-- # of attempts and timer -->
                    <div class="row">
                        <div class="col-xs-6">
                            <div class="attempts"><kbd>Attempts: {{game.getAttempts()}}</kbd></div>
                        </div>
                        <div class="col-xs-6">
                            <div class="timer"><kbd>Time:{{game.timer.getTime()}}s</div>
                        </div>
                    </div>
                    <!-- message to user -->
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="messagebox">{{game.userMessage()}}</div>
                        </div>
                    </div>

                    <!-- give up (show answers) and reset buttons -->
                    <div class="row">
                        <div class="col-xs-6 text-center">
                            <form ng-submit="game.giveUp()">
                                <button class="btn btn-primary myButton" type="submit" value="Give Up">Give Up</button>
                            </form>
                        </div>
                        <div class="col-xs-6 text-center">
                            <form ng-submit="game.reset()">
                                <button class="btn btn-primary myButton" type="submit" value="Reset">Reset</button>
                            </form>
                        </div>
                    </div>

                    <!-- Tiles - use angular to repeat the tiles -->
                    <div class="row">
                        <div class="col-xs-4 col-sm-3" ng-repeat="tile in game.tiles">
                            <!-- depending on whether the tile is already matched, make an active button in a form or just a button appearance -->
                            <div ng-switch on="game.tileMatched(tile.id)">
                                <div ng-switch-when="true">
                                    <div class="tile exposed {{game.tileExposedClass(tile.id)}}">
                                        <button class="btn btn-lg myButton"><i class="glyphicon {{tile.icon}}"></i></button>
                                    </div>
                                </div>
                                <div ng-switch-default>
                                    <div class="tile exposed {{game.tileExposedClass(tile.id)}}">
                                        <form ng-submit="game.tilePressed(tile.id)">
                                            <button class="btn btn-lg myButton" type="submit"><i class="glyphicon {{game.tileIcon(tile.id)}}"></i></button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- high scores -->
                    <div class="row">
                         <div class="col-xs-12">
                             <div class="high-scores">
                                 <div class="row">
                                     <div class="col-xs-12">
                                         <div class="text-center">
                                             <h3>High Scores</h3>
                                         </div>
                                     </div>
                                 </div>
                                 <div class="row score">
                                     <div class="col-xs-6 score-name">
                                         <h5><strong><i>Name</i></strong></h5>
                                     </div>
                                     <div class="col-xs-2 score-attempts">
                                         <h5><strong><i>#</i></strong></h5>
                                     </div>
                                     <div class="col-xs-4 score-time">
                                         <h5><strong><i>Time</i></strong></h5>
                                     </div>
                                 </div>
                                 <div class="row score" ng-repeat="score in game.getScores()">
                                     <div class="col-xs-6 score-name">
                                         {{score.name}}
                                     </div>
                                     <div class="col-xs-2 score-attempts">
                                         {{score.attempts}}
                                     </div>
                                     <div class="col-xs-4 score-time">
                                         {{score.seconds}}
                                     </div>
                                 </div>
                             </div>
                         </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- copyright notice -->
        <div class="row">
            <div class="col-xs-12">
                <div class="text-center text-info">
                    Copyright (c) 2016, Robert Gaffney
                </div>
                <div class="text-center text-info">
                    <a href="https://en.wikipedia.org/wiki/BSD_licenses#2-clause_license_.28.22Simplified_BSD_License.22_or_.22FreeBSD_License.22.29">License: New BSD 2-Clause</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
